<!-- 分页组件 -->
<template>
	<div class="pagination-container">
		<el-pagination
			class="pagination-comp"
			:total="total"
			v-model:current-page="innerParams.pageNum"
			v-model:page-size="innerParams.pageSize"
			:page-sizes="pageSizes"
			:pager-count="pagerCount"
			:layout="layout"
			background
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

// 类型定义
interface PaginationParams {
	pageNum: number; //页码
	pageSize: number; //数量
}

interface Props {
	total: number; //总条数
	params: PaginationParams;
	pageSizes?: number[];
	pagerCount?: number;
	layout?: string;
}

const props = withDefaults(defineProps<Props>(), {
	pageSizes: () => [10, 20, 30, 50, 100, 200],
	pagerCount: 5,
	layout: 'total, sizes, prev, pager, next, jumper',
});

const emit = defineEmits(['update:params', 'change']);

// 响应式分页参数
const innerParams = ref<PaginationParams>({ ...props.params });

// 监听外部传入的参数变化
watch(
	() => props.params,
	(newVal) => {
		innerParams.value = { ...newVal };
	}
);

const handleSizeChange = (val: number) => {
	innerParams.value.pageSize = val;
	emitChange();
};

const handleCurrentChange = (val: number) => {
	innerParams.value.pageNum = val;
	emitChange();
};

const emitChange = () => {
	emit('update:params', { ...innerParams.value });
	emit('change', { ...innerParams.value });
};
</script>

<style scoped lang="scss">
.pagination-container {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}
</style>
